<!doctype html>
<html>
<head>
    <!--更多资源：https://gitee.com/iGaoWei/big-data-view -->
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta http-equiv="refresh" content="60'">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--大屏-->
    <link type="text/css" href="css/public.css" rel="stylesheet">
    <link type="text/css" href="css/icon.css" rel="stylesheet">
    <link type="text/css" href="css/index.css" rel="stylesheet">
    <script type="text/javascript">
        document.documentElement.style.fontSize = document.documentElement.clientWidth /768*100 + 'px';
    </script>
    <script src="js/echarts.min.js"></script>
    <script th:src="@{/js/jquery.min.js}"></script>
</head>

<body>
<div class="bg">
    <div class="title">学生信息管理数据智慧大屏</div>

    <div class="leftMain_middle">
        <div class="leftMain_middle_left">
            <div class="leftMain_middle_leftIn">
                <h3>学生班级分布</h3>
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div class="biaoge" style="width:90%; height:24vh" id="chartmain"></div>
                <script type="text/javascript">
                    //window.onload = function () {
                    $(document).ready(function () {
                        let data = [];
                        $.ajax({
                            url: "/getCLassData",
                            type: "post",
                            dataType: "json",
                            async: false,
                            success: function (d) {
                                data = d;
                            }
                        })
                        //指定图表的配置项和数据
                        var dataAxis =data.name;
                        var yMax = 500;
                        var dataShadow = [];

                        for (var i = 0; i < data.length; i++) {
                            dataShadow.push(yMax);
                        }

                        option = {
                            title: {
                                text: '',
                                subtext: ''
                            },
                            grid: {
                                x: 40,
                                y: 40,
                                x2: 20,
                                y2: 20,

                            },
                            xAxis: {
                                data: dataAxis,
                                axisLabel: {
                                    /*inside: true,*/
                                    interval: 0,
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12

                                    }
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLine: {
                                    show: true,
                                    symbol: ['none', 'arrow'],
                                    symbolOffset: 12,
                                    lineStyle: {
                                        color: '#fff',
                                    }
                                },
                                z: 10
                            },
                            yAxis: {
                                type: 'value',
                                name: '单位：人',
                                axisLine: {
                                    show: true,
                                    symbol: ['none', 'arrow'],
                                    symbolOffset: 12,
                                    lineStyle: {
                                        color: '#fff',
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12
                                    }
                                }
                            },

                            dataZoom: [
                                {
                                    type: 'inside'
                                }
                            ],
                            series: [
                                { // For shadow
                                    type: 'bar',
                                    itemStyle: {
                                        color: 'rgba(0,0,0,0.05)'
                                    },
                                    barGap: '-100%',
                                    barCategoryGap: '40%',
                                    data: dataShadow,
                                    animation: false
                                },
                                {
                                    type: 'bar',
                                    itemStyle: {
                                        color: new echarts.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                {offset: 0, color: 'rgb(255,255,255)'},
                                                {offset: 0.5, color: 'rgba(24,141,240,0.62)'},
                                                // {offset: 1, color: 'rgba(14,255,118,0.19)'}
                                            ]
                                        )
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            color: new echarts.graphic.LinearGradient(
                                                0, 0, 0, 1,
                                                [
                                                    {offset: 0, color: 'rgb(255,255,255)'},
                                                    {offset: 0.7, color: 'rgba(24,141,240,0.62)'},
                                                    // {offset: 1, color: 'rgba(24,240,233,0.44)'}
                                                ]
                                            )
                                        }
                                    },
                                    data: data.value
                                }
                            ]
                        };
                        //获取dom容器
                        var myChart = echarts.init(document.getElementById('chartmain'));
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    });
                    //};
                </script>
                <span class="border_bg_leftTop"></span>
                <span class="border_bg_rightTop"></span>
                <span class="border_bg_leftBottom"></span>
                <span class="border_bg_rightBottom"></span>
            </div>
        </div>
        <div class="leftMain_middle_right">
            <div class="leftMain_middle_rightIn">
                <h3>学生宿舍分布</h3>
                <div class="biaoge" style="width:100%; height:25vh" id="ci"></div>
                <script type="text/javascript">
                    $(document).ready(function () {
                        let data = [];
                        $.ajax({
                            url: "/getHotelData",
                            type: "post",
                            dataType: "json",
                            async: false,
                            success: function (d) {
                                data= d;
                            }
                        })

                        option = {
                            title: {
                                text: ''
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                textStyle: {
                                    color: 'rgb(255,255,255)',
                                    fontSize: 12,
                                },
                                right: '10%',
                                data: '折线一'
                            },
                            grid: {
                                x: 40,
                                y: 40,
                            },
                            toolbox: {
                                feature: {
                                    //saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                axisLabel: {
                                    /*inside: true,*/
                                    interval: 0,
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12

                                    }
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLine: {
                                    show: true,
                                    symbol: ['none', 'arrow'],
                                    symbolOffset: 12,
                                    lineStyle: {
                                        color: '#fff',
                                    }
                                },
                                data: data.name
                            },
                            yAxis: {
                                type: 'value',

                                axisLine: {
                                    show: true,
                                    symbol: ['none', 'arrow'],
                                    symbolOffset: 12,
                                    lineStyle: {
                                        color: '#fff',
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12
                                    }
                                }
                            },
                            series: [
                                {
                                    name: '折线一',
                                    type: 'line',
                                    stack: '总量',
                                    data:data.value,
                                    itemStyle: {
                                        normal: {
                                         color: "rgb(240,1,200)",//折线点的颜色
                                            lineStyle: {
                                                color: "rgb(0,255,187)",//折线的颜色
                                                width: 2,
                                            }
                                        },
                                    }
                                },
                            ]
                        };
                        //获取dom容器
                        var myChart = echarts.init(document.getElementById('ci'));
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                        //};
                    });
                </script>
                <span class="border_bg_leftTop"></span>
                <span class="border_bg_rightTop"></span>
                <span class="border_bg_leftBottom"></span>
                <span class="border_bg_rightBottom"></span>
            </div>
        </div>
    </div>
    <div class="rightMain">
        <div class="rightMain_top">
            <div class="rightMain_topIn">
                <h3 >学生地区分布</h3>
                <div class="biaoge" style="margin: auto" id="chartmain_bing"></div>
                <script type="text/javascript">
                    $(document).ready(function () {
                        let data = [];
                        $.ajax({
                            url: "/getAddressData",
                            type: "post",
                            dataType: "json",
                            async: false,
                            success: function (d) {
                                data = d;
                            }
                        })

                        option = {
                            title: {
                                text: '学生地区分布',
                                subtext: '',
                                left: 'right',
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 12
                                }
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            legend: {
                                // orient: 'vertical',
                                // top: 'middle',
                                type: 'scroll',
                                orient: 'vertical',
                                right: 10,
                                top: 40,
                                bottom: 20,
                                left: 'right',
                                data: data.name,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 12
                                }

                            },
                            grid: {
                                x: '-10%',
                                y: 40,
                                x2: 20,
                                y2: 20,
                            },
                            // color: ['#09d0fb', '#f88cfb', '#95f8fe', '#f9f390', '#ecfeb7'],
                            color: ['#f700ff', '#ffa500', '#9900ff', '#73ff00', '#008000'],

                            series: [
                                {
                                    type: 'pie',
                                    radius: '65%',
                                    center: ['50%', '50%'],
                                    selectedMode: 'single',
                                    data: [
                                        //通过循环把data数组里的数据一个一个拿到，
                                        {  name: data.name[0], value: data.value[0]},
                                        {  name: data.name[1], value: data.value[1]},
                                        {  name: data.name[2], value: data.value[2]},
                                        {  name: data.name[3], value: data.value[3]},
                                        {  name: data.name[4], value: data.value[4]},

                                    ],
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        //获取dom容器
                        var myChart = echarts.init(document.getElementById('chartmain_bing'));
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    });

                </script>
<!--                <span class="border_bg_leftTop"></span>-->
<!--                <span class="border_bg_rightTop"></span>-->
<!--                <span class="border_bg_leftBottom"></span>-->
                <span class="border_bg_rightBottom1"></span>
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>
<!--大屏-->
<!--数字增长累加动画-->
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>